<template>
  <div class="data-box">
    <div class="box-left">
      <left-page :treedata="TreeData" />
    </div>
    <div class="box-right">
      <right-page />
    </div>
  </div>
</template>

<script>
import API from '../../../api/index'
import LeftPage from './components/left'
import RightPage from './components/right'
export default {
  components: {
    LeftPage,
    RightPage
  },
  data() {
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      TreeData: ''
    }
  },
  mounted() {
    this.NodeTree()
  },
  // 销毁缓存
  destroyed() {
    localStorage.removeItem('NodeName')
  },
  methods: {
    NodeTree() {
      API.datapage.NodeTree().then((res) => {
        if (res.code === 1) {
          this.TreeData = res.data
        }
      }).catch((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.data-box {
	position: relative;
	margin: -12px -10px;
	background-color: #F2F2F2;
	height: calc(100vh - 92px);
	display: flex;
	.box-left {
		width: 17rem;
		height: 100%;
		background: rgba(28, 40, 60, 1);
    overflow: hidden;
	}
	.box-right{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
}
</style>
